<template>
  <a-card>
    <template #title>
      <a-button type="primary" @click="routerToAdd">新增</a-button>
    </template>
    <div class="m-top-5">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{
          ...articlePagination,
          onChange: changeArticlePagination,
        }"
        rowKey="id"
        size="default"
      >
        <template #name="{ text, record }">
          <a-button type="link" @click="routerToEdit(record)">{{ text }}</a-button>
        </template>
        <template #operation="{ record }">
          <a-button
            type="danger"
            style="margin-left: 5px"
            @click="handleDelArticle(record)"
            >删除</a-button
          >
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<script>
import { useService } from "@/utils/request";
import { formatDateTime } from "@/utils/data";
import { articlesCfg, delarticleCfg } from "@/api/article.conf";
import { onMounted, ref, createVNode, reactive } from "vue";
import { useRouter } from "vue-router";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
const columns = [
  {
    title: "内容名称",
    dataIndex: "title",
    slots: {
      customRender: "name",
    },
  },
  {
    title: "创建时间",
    dataIndex: "create_at",
    customRender: ({ text }) => formatDateTime(text),
  },
  {
    title: "修改时间",
    dataIndex: "update_at",
    customRender: ({ text }) => formatDateTime(text),
  },
  {
    title: "操作",
    slots: {
      customRender: "operation",
    },
  },
];

const articlePagination = reactive({
  pageSize: 8,
  current: 1,
  total: 0,
  showTotal: (total) => `共${total}条`,
});
export default {
  setup() {
    const categoriesRef = ref([]);
    const request = useService(articlesCfg);
    const delArtRequest = useService(delarticleCfg);
    const router = useRouter();
    //查询所有内容列表
    function nexArticlePage() {
      const page_number = articlePagination.current;
      const page_size = articlePagination.pageSize;
      request
        .setParams({ page_size, page_number })
        .reload()
        .then((response) => {
          categoriesRef.value = response.data || [];
          articlePagination.total = response.total || 0;
        });
    }

    onMounted(() => {
      nexArticlePage();
    });

    //翻页
    function changeArticlePagination(page) {
      articlePagination.current = page;
      nexArticlePage();
    }

    function routerToEdit(record) {
      router.push({
        name: "editArticle",
        params: {
          id: record.id,
        },
      });
    }

    function routerToAdd() {
      router.push({
        name: "addArticle",
      });
    }

    function handleDelArticle(record) {
      Modal.confirm({
        title: "你确定要删除该条信息吗?",
        okType: "danger",
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          const { id } = record;
          delArtRequest.setEndPath(id).reload(true, () => {
            articlePagination.current = 1;
            nexArticlePage();
          });
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    }

    return {
      columns,
      data: categoriesRef,
      routerToEdit,
      routerToAdd,
      handleDelArticle,
      articlePagination,
      changeArticlePagination,
    };
  },
};
</script>
